<!--
 	* @author  dumeng
-->
<template>
  <footer id="b-footer">
    <ul>
      <li v-for="(item, i) in linkList" :key="i" @click="goPage(item.link, i)">
        <img :src="location == item.location ? item.iconActive() : item.icon()" alt />
        <span :class="{ active: location == item.location }">{{ item.name }}</span>
      </li>
    </ul>
  </footer>
</template>
<script>
import { mapGetters } from 'vuex'
import checkauth from '@/common/check'
import url from '@/views/center/api'
export default {
  name: 'BFooter',
  props: {
    location: {
      type: Number,
      default: 1
    },
    isView: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      theme: window.document.documentElement.getAttribute('data-theme') || '',
      linkList: [
        {
          name: '首页',
          icon: () => {
            return require('@/assets/images/footer/index-g.png')
          },
          iconActive: () => {
            return this.theme !== '' ? require('@/assets/images/footer/' + this.theme + '/index-a.png') : require('@/assets/images/footer/theme-one/index-a.png')
          },
          location: 1,
          link: '/index'
        },
        {
          name: '服务',
          icon: () => {
            return require('@/assets/images/footer/service-g.png')
          },
          iconActive: () => {
            return this.theme !== '' ? require('@/assets/images/footer/' + this.theme + '/service-a.png') : require('@/assets/images/footer/theme-one/service-a.png')
          },
          location: 2,
          link: '/service'
        },
        {
          name: '商城',
          icon: () => {
            return require('@/assets/images/footer/shop-g.png')
          },
          iconActive: () => {
            return this.theme !== '' ? require('@/assets/images/footer/' + this.theme + '/shop-a.png') : require('@/assets/images/footer/theme-one/shop-a.png')
          },
          location: 3,
          link: 'mall'
        },
        {
          name: '我的',
          icon: () => {
            return require('@/assets/images/footer/center-g.png')
          },
          iconActive: () => {
            return this.theme !== '' ? require('@/assets/images/footer/' + this.theme + '/center-a.png') : require('@/assets/images/footer/theme-one/center-a.png')
          },
          location: 4,
          link: '/center'
        }
      ],
      isOpen: false
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'loginState'
    ])
  },
  mounted() {
    this.$bus.$on('theme-change', () => {
      this.theme = localStorage.getItem('themeColor')
    })
  },
  created() {

  },
  methods: {
    async goPage(link, position) {
      if (!this.isView) {
        if (link) {
          if (link !== '/index' && link !== '/center' && link !== '/service') {
            if (!this.loginState) {
              this.$router.push('/login')
              return
            }
            if (await checkauth()) {
              if (link == 'mall') {
                this.getOpen()
              } else {
                this.$router.push(link)
              }
            }
          } else {
            this.$router.push(link)
          }
        } else {
          this.$toast('功能建设中！')
        }
      }
    },
    getOpen() {
      const ths = this
      this.$axios.post(url.opened.isOpen, {}).then(res => {
        if (res.code && res.code === '200') {
          const code = res.data.code || 1
          if (code == 1) {
            this.$dialog.confirm({
              title: '提示',
              mes: '您还未开通福利钱包，不能进入商城',
              opts: [
                {
                  txt: '再想想',
                  color: false,
                  callback: () => {

                  }
                },
                {
                  txt: '点我去开通',
                  color: true,
                  callback: () => {
                    ths.$router.push({ path: '/welfareCenter' })
                  }
                }
              ]

            })
          } else {
            ths.toMall()
          }
        }
      }).catch(() => {
        this.isOpen = false
      })
    },
    toMall() {
      this.$axios.post(url.opened.toMall, { pageNotifyUrl: '/pages/home/home', logoutRedirectUrl: window.location.origin}).then(res => {
        if (res.data.code && res.data.code === '200') {
          window.location.href = res.data.data
        } else {
          this.$dialog.alert({ mes: res.data.msg || '操作失败' })
        }
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped lang="scss">
#b-footer {
  position: absolute;
  height: rem(98);
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  background-color: #fff;
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      height: rem(98);
      width: 20%;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      img {
        width: rem(48);
        height: rem(48);
      }
      span {
        margin-top: rem(10);
        font-size: rem(20);
        color: #5e5e5e;
        line-height: 1.1;
      }
      .active {
        @include font-color($mainColor);
      }
    }
  }
}
</style>
